<template>
	<view>
		<view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @input="shuju" v-model="searchs" type="text" placeholder="搜索" confirm-type="search"></input>
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav text-center">
			<view class="cu-item" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in list" :key="index" @tap="tabSelect"
			 :data-id="index">
				{{item}}
			</view>
		</scroll-view>
		<view class="content" v-if="!searchs">
			<block v-for="(item, index) in arrList" :key="index">
				<uni-swipe-action v-if="item.type == 1" :options="options1" @click="bindClick(item.id)" class="list">
					<view class="cont">
						<view class="name">{{item.content}}</view>
						<view class="times">{{item.createtime}}</view>
					</view>
				</uni-swipe-action>
				<uni-swipe-action v-if="item.type == 3" :options="options1" @click="bindClick(item.id)" class="list">
					<view class="cont">
						<view class="name">
							<image class="imgs" :src="urls + item.image"></image>
							{{item.content}}
						</view>
						<view class="times">{{item.createtime}}</view>
					</view>
				</uni-swipe-action>
				<uni-swipe-action v-if="item.type == 2" :options="options1" @click="bindClick(item.id)" class="list">
					<view class="cont">
						<view class="name">
							<image class="imgs img2" src="../../static/image/yuyintiao_20.png"></image>
							语音：
							<view class="grays">{{item.yuyintime}}</view>
						</view>
						<view class="times">{{item.createtime}}</view>
					</view>
				</uni-swipe-action>
				<uni-swipe-action v-if="item.type == 4" :options="options1" @click="bindClick(item.id)" class="list">
					<view class="cont">
						<image class="img2s" src="../../static/image/head.png"></image>
						<view class="times">12:12</view>
					</view>
				</uni-swipe-action>
			</block>
		</view>
		<view class="content" v-if="searchs">
			<block v-for="(item, index) in arrList" :key="index">
				<uni-swipe-action v-if="item.type == 1" :options="options1" @click="bindClick(item.id)" class="list">
					<view class="cont">
						<view class="name">{{item.content}}</view>
						<view class="times">{{item.createtime}}</view>
					</view>
				</uni-swipe-action>
			</block>
		</view>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue'
	export default {
		components: {
			uniSwipeAction,
			// uniList,
			// uniListItem
		},
		data() {
			return {
				searchs:'',
				TabCur: 0,
				scrollLeft: 0,
				list: ['文字', '语音', '图片'],
				arrList: [],
				options1: [{
					text: '删除',
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}],
				urls: this.$common.baseUrl,
				type:''
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.isOpened = true
			})
		},
		onShow() {
			this.$msgchat.initwork();
		},
		onLoad() {
			this.initDat();
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				console.log(this.TabCur)
				if(this.TabCur == 0){
					this.type = 1
				}else if(this.TabCur == 1){
					this.type = 2
				}else if(this.TabCur == 2){
					this.type = 3
				}
				var obj = {
					type:this.type
				}
				this.$common.requests('/api/collect/searchcollect', obj).then(res => {
					if (res.data.code == 1) {
						this.arrList = res.data.data;
					}
				})
			},
			initDat() {
				var obj = {
					type:1
				}
				this.$common.requests('/api/collect/searchcollect', obj).then(res => {
					if (res.data.code == 1) {
						this.arrList = res.data.data;
					}
				})
			},
			shuju(e){
				this.searchs = e.detail.value
				var obj = {
					content:this.searchs
				}
				this.$common.requests('/api/collect/searchcollect', obj).then(res => {
					if (res.data.code == 1) {
						this.arrList = res.data.data;
					}
				})
				if(this.searchs == ''){
					this.initDat();
				}
			},
			bindClick(id) {
				var obj = {
					id: id
				}
				this.$common.requests('/api/collect/collectdel', obj).then(res => {
					if (res.data.code == 1) {
						this.initDat();
					}
				})

			},
		}
	}
</script>

<style>
	page {
		background: #F5F4F9;
		border-top: 1px solid #E8E8E8;
	}

	.search {
		background: #FFFFFF;
		height: 110upx;
	}

	.radius {
		background: #F5F4F9 !important;
		height: 80upx !important;
		margin-top: 10upx;
	}

	.bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.content {
		padding: 0 30upx;
	}

	.uni-swipe_box {
		border-radius: 20upx;
		margin-top: 20upx !important;
	}

	.uni-swipe_button {
		margin-top: 20upx !important;
		border-radius: 25upx;
	}

	.list {
		border-radius: 25upx;
		margin-top: 20upx !important;
	}



	.cont {
		width: 80%;
		margin: 0 30upx;
		padding: 25upx 0;
		position: relative;
		background-color: #fff;
		font-size: 15px;
	}

	.name {
		display: flex;
		justify-content: flex-start;
	}

	.times {
		font-size: 28upx;
		color: #797979;
		padding-top: 10upx;
	}

	.imgs {
		width: 90upx;
		height: 90upx;
		margin-right: 20upx;
	}

	.img2 {
		width: 100upx;
		height: 50upx;
	}

	.grays {
		color: #797979;
	}

	.img2s {
		width: 60upx;
		height: 60upx;
	}

	
</style>
